<template>
  <article class="infoTemplate hz-main">
    <Hprocess
      ref="process"
      :menu-list="menuList"
    />
  </article>
</template>

<script>
import { saveItem, loadItem } from '@/utils/storage'
import Hprocess from '@/components/process'
export default {
  name: 'InfoTemplate',
  components: {
    Hprocess
  },
  props: {},
  data() {
    return {
      menuList: []
    }
  },
  computed: {
  },
  watch: {
    type(v) {
      if (v === 'r') {
        this.$refs.hzform.mergeRules({
          status: { type: 'span' },
          templateName: { props: { readonly: true }}
        })
        this.rule[this.rule.length - 1].validate[0].required = false
      }
    }
  },
  created() {
    this.initTemplate()
  },
  mounted() { },
  methods: {
    // 填充数据
    fillData(res, n) {
      const { templateDetailList } = res.data
      let templateNodeList
      console.log(4, res.data)
      switch (n) {
        case 0:
          this.menuList.push(res.data)
          saveItem('templateNodeList', res.data)
          break
        case 1:
          this.$refs.process.widgetStep.list = templateDetailList
          templateNodeList = loadItem('templateNodeList')
          this.menuList.push(templateNodeList)
          break
      }
    },
    // 初始化模板
    initTemplate() {
      const res = { 'code': 0, 'message': '操作成功', 'data': { 'templateCode': 'ZD109131722044373', 'templateTypeList': ['生产模板', '投产模板', '配件模板'], 'templateNodeList': [{ 'id': '202108131449194324c12b6a7e7be350b861', 'templateId': null, 'nodeCode': 'MB2021081610', 'nodeName': '系统调试', 'sortNo': 11 }, { 'id': '202108131449194324c12b6a7e7be350b862', 'templateId': null, 'nodeCode': 'MB2021081612', 'nodeName': '系统标定', 'sortNo': 12 }, { 'id': '202108131449194324c12b6a7e7be350b863', 'templateId': null, 'nodeCode': 'MB2021081613', 'nodeName': '24 小时烤机', 'sortNo': 13 }, { 'id': '202108131449194324c12b6a7e7be350b864', 'templateId': null, 'nodeCode': 'MB2021081614', 'nodeName': '内部检验', 'sortNo': 14 }, { 'id': '202108131449194324c12b6a7e7be350b865', 'templateId': null, 'nodeCode': 'MB2021081615', 'nodeName': '资料整理', 'sortNo': 15 }, { 'id': '202108131449194324c12b6a7e7be350b866', 'templateId': null, 'nodeCode': 'MB2021081616', 'nodeName': '出场验收', 'sortNo': 16 }, { 'id': '202108131449194324c12b6a7e7be350b867', 'templateId': null, 'nodeCode': 'MB2021081617', 'nodeName': '出场整理', 'sortNo': 17 }, { 'id': '202108131449194324c12b6a7e7be350b868', 'templateId': null, 'nodeCode': 'MB2021081618', 'nodeName': '装箱', 'sortNo': 18 }, { 'id': '202108131449194324c12b6a7e7be350b869', 'templateId': null, 'nodeCode': 'MB2021081619', 'nodeName': '发货', 'sortNo': 19 }, { 'id': '202108131449194324c12b6a7e7be350b850', 'templateId': null, 'nodeCode': 'MB2021081600', 'nodeName': '工艺转换', 'sortNo': 1 }, { 'id': '202108131449194324c12b6a7e7be350b851', 'templateId': null, 'nodeCode': 'MB2021081601', 'nodeName': '提交采购计划', 'sortNo': 2 }, { 'id': '202108131449194324c12b6a7e7be350b852', 'templateId': null, 'nodeCode': 'MB2021081602', 'nodeName': '生产文件发放', 'sortNo': 3 }, { 'id': '202108131449194324c12b6a7e7be350b853', 'templateId': null, 'nodeCode': 'MB2021081603', 'nodeName': '生产计划制定', 'sortNo': 4 }, { 'id': '202108131449194324c12b6a7e7be350b854', 'templateId': null, 'nodeCode': 'MB2021081604', 'nodeName': '生产准备', 'sortNo': 5 }, { 'id': '202108131449194324c12b6a7e7be350b855', 'templateId': null, 'nodeCode': 'MB2021081605', 'nodeName': '派单', 'sortNo': 6 }, { 'id': '202108131449194324c12b6a7e7be350b856', 'templateId': null, 'nodeCode': 'MB2021081606', 'nodeName': '领料', 'sortNo': 7 }, { 'id': '202108131449194324c12b6a7e7be350b857', 'templateId': null, 'nodeCode': 'MB2021081607', 'nodeName': '部件组装', 'sortNo': 8 }, { 'id': '202108131449194324c12b6a7e7be350b858', 'templateId': null, 'nodeCode': 'MB2021081608', 'nodeName': '部件调试', 'sortNo': 9 }, { 'id': '202108131449194324c12b6a7e7be350b859', 'templateId': null, 'nodeCode': 'MB2021081609', 'nodeName': '系统组装', 'sortNo': 10 }] }}
      this.fillData(res, 0)
    }
  }
}
</script>

<style lang="scss" scope>
.infoTemplate {
  padding: 16px 28px 16px 40px !important;
  .el-form-item {
    margin-bottom: 8px;
  }
  .el-form-item__label {
    width: 80px !important;
  }
  .el-form-item__content {
    margin-left: 80px !important;
  }
  .el-form-item__label::after {
    content: ':';
    position: absolute;
  }
  .el-col input[readonly='readonly'] {
    border: 0 !important;
  }
  .drag-wrapper {
    display: flex;
    flex-direction: column;
    height: calc(100% - 88px);
    position: relative;
    .el-form-item__label {
      width: 163px !important;
      &::before {
        content: '*';
        color: #f56c6c;
        margin-right: 4px;
      }
    }
  }
  footer {
    padding: 15px 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .detail {
    height: calc(100vh - 320px);
  }
  .detail-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 15px;
    li {
      width: 148px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: #ffffff;
      border: 1px solid #e9ecf3;
      border-radius: 3px;
      margin: 0 7px 8px 0;
      transition: all 0.2s ease;
      position: relative;
      margin-right: 148px;
      margin-bottom: 20px;
      & > .line,
      & > .arrow {
        position: absolute;
        top: 50%;
        left: 100%;
      }
      & > .line {
        margin: 0;
      }
      & > .arrow {
        font-size: 20px;
        left: 279px;
        top: 10px;
      }
    }
  }
}
</style>
